<template>
   <nav class="health-info-nav">
    <ul>
      <template v-for="(value, key) in routeListData">
        <router-link :to="key" tag="li" :replace="true">{{value}}</router-link>
      </template>
      <li></li>
    </ul>
   </nav>
</template>

<script>
export default {
  name: 'healthInfoNav',
  data () {
    return {
    }
  },
  props: ['routeListData']
}
</script>

<style lang="scss" scoped>
@import '../../scss/mixin.scss';
@import '../../scss/_variables.scss';
nav{
    margin: 24px 0;
}
ul{
  @include flexRow(flex-start);
  li{
    padding:26px;
    cursor:pointer;
    @include xlBorder();
    background-color:$bgc4;
    font-size:16px;
    color:$fc1;
    &:last-child{
      flex-grow:2;
      cursor:auto;
    }
    &:not(:first-child){
      border-left:none;
    }
    &.router-link-active{
      border-top: 4px solid $border-b1;
      border-bottom:none;
      background-color:$fc2;
      }
  }
}
</style>